<template>
  <div class="hello">
    <fks-query-page
      ref="query"
      :data="tableData"
      :border="true"
      @query="getData"
      @clear="clear"
      :total="total"
      :pageSize.sync="pageSize"
      :currentPage.sync="pageNo"
      :hideSwitch.sync="hideSwitch"
      :page-sizes="[10, 20, 50, 100]"
      style="min-height: 500px; height: 100%"
      tableName="UE实例管理"
      layout="total, sizes, prev, pager, next, jumper"
      :highlight-current-row="true"
      @row-click="rowClick"
      @select="handleSelection"
    >
      <template slot="search">
        <fks-search-item label="工程名称" for="input">
          <fks-input placeholder="" v-model="projectName"></fks-input>
        </fks-search-item>
      </template>
      <template slot="button">
        <fks-button
          icon="fks-icon-plus"
          plain
          type="primary"
          @click="uploadProject"
        >
          上传工程
        </fks-button>
        <fks-button
          icon="fks-icon-delete"
          plain
          type="danger"
          @click="deleteProject"
        >
          删除工程
        </fks-button>
      </template>
      <template>
        <fks-table-column type="selection" width="55" />
        <fks-table-column
          prop="name"
          label="工程名称"
          width="240"
        ></fks-table-column>
        <fks-table-column prop="originalPath" label="原文件地址" width="400">
        </fks-table-column>
        <fks-table-column prop="path" label="工程文件地址" width="400">
        </fks-table-column>

        <fks-table-column prop="uploadDate" label="部署时间">
        </fks-table-column>
      </template>
    </fks-query-page>
    <add-dialog
      v-if="dialogVisible"
      :visible.sync="dialogVisible"
      @refresh="getData()"
    ></add-dialog>
  </div>
</template>

<script>
import { getUeProject, deleteUeProject } from "../apis/ueproject";
import addDialog from "./addDialog.vue";
import { useDeleteConfirmation } from "../hooks/useDeleteConfirm";
export default {
  setup() {
    const { deleteData, isDeleting } = useDeleteConfirmation();
    return {
      deleteData,
      isDeleting,
    };
  },
  components: { addDialog },
  data() {
    return {
      projectName: "",
      preciseSearch: false,
      hideSwitch: true,
      tableData: [],
      pageSize: 15,
      pageNo: 1,
      total: 0,
      selectList: [],
      selectIds: [],
      dialogVisible: false,
    };
  },
  computed: {},
  methods: {
    clear() {
      this.projectName = "";
      this.getData();
    },
    getData() {
      const data = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        name: this.projectName,
      };
      getUeProject(data).then((res) => {
        if (res.status) {
          this.tableData = res.data;
          this.total = res.page.total;
        }
      });
    },

    rowClick(val) {
      console.log("rowClick", val);
    },
    handleSelection(val) {
      this.selectList = [...val];
      this.selectIds = this.selectList.map((item) => {
        return item.id;
      });
    },

    uploadProject() {
      this.dialogVisible = true;
    },
    deleteProject() {
      this.deleteData(this.selectIds, (data) => {
        return deleteUeProject({
          ids: data,
        }).then((res) => {
          this.selectIds.length = 0;
          this.$message({
            type: res.status ? "success" : "info",
            message: res.message,
          });
          // 更新数据
          this.getData();
        });
      });
    },
  },
  created() {
    this.getData();
  },
  mounted() {},
};
</script>
